<template>
    <div>
                        <!-- 面包屑区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">人在回路</el-breadcrumb-item>
        <el-breadcrumb-item>决策</el-breadcrumb-item>
        <el-breadcrumb-item>决策学习器</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-button class="queryBtn" @click="gotoQueryDec" type="primary">查询决策</el-button>
      <el-button class="queryBtn" @click="gotoDecision" type="primary">应用决策</el-button>
      <el-button class="queryBtn" @click="gotoDecHumanFea" type="primary">决策特征工程</el-button>
      <el-button class="queryBtn" disabled="" type="primary">决策学习器</el-button>
      <el-row>
        <el-col :span="10">
          <el-form class="choosedataset" label-position="right" label-width="150px"  :model="chooseDatasetForm" ref="chooseDatasetFormRef">
            <el-form-item prop="dataset_name" label="选择测试集">
              <el-input clearable  readonly v-model="chooseDatasetForm.dataset_name" style="width: 300px"
                        @click.native="datasetDialogVisible=true" placeholder="请选择测试集"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="10">
          <el-form class="choosedataset" label-position="right" label-width="150px"  :model="chooseLearnerForm">
            <el-form-item prop="learner_name" label="学习器">
              <el-input clearable  readonly v-model="chooseLearnerForm.learner_name" style="width: 300px"
                        @click.native="learnerDialogVisible=true" placeholder="请选择学习器"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 决策应用特征工程部分 -->
      <el-form label-position="right" label-width="150px" :model="decideLearnerForm" ref="decideLearnerFormRef"  class="demo-ruleForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="决策名" prop="learner_name">
              <el-input clearable  v-model="decideLearnerForm.decision_name" placeholder="请填写决策名" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="决策类型" prop="learner_type">
              <el-select disabled  v-model="decideLearnerForm.decision_type" placeholder="决策类型" style="width: 300px">
                <el-option v-for="(option, index) in decisionTypeOptions" :key="index" :label="option.name" :value="option.type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
            <!-- 决策应用学习器决策参数的表单 -->
      <el-form label-position="right" label-width="150px" :model="decideLearnerParamForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="选择标签" prop="label">
              <el-select  v-model="decideLearnerParamForm.label" placeholder="选择标签" style="width: 300px">
                <el-option
                  v-for="(item,index) in columnsList" :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item  >
               <!-- 提交所有表单  -->
               <el-button class="submitBtn" type="primary" @click="submitAllLearnerForm">应用决策</el-button>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
              <!--      选择数据集，弹出的窗口-->
    <el-dialog title="选择数据集" :visible.sync="datasetDialogVisible" @close="getColumns">
      <dataset-hu-fea :isDialog="true" @dataset-choose = chooseDataset></dataset-hu-fea>
      <!-- <dataset :isDialog="true" @dataset-choose = chooseDataset></dataset> -->
    </el-dialog>
      <!--      选择学习器，弹出的窗口-->
    <el-dialog title="选择学习器" :visible.sync="learnerDialogVisible" @close="getColumns">
      <query-learner :isLearnDialog="true" @learner-choose="chooseLearner"></query-learner>
    </el-dialog>
    </div>
</template>

<script>
import DatasetHuFea from '../data/DatasetHuFea'

import QueryLearner from './../learn/QueryLearner'
import featureApi from './../../api/feature'
import decisionLearnerApi from './../../api/decisionLearner'
// 学习器类型
const decisionTypeOptions = [
  { type: 'Manual_FE', name: '应用特征工程' },
  { type: 'Manual_L', name: '应用学习器' },
  { type: 'Manual_D', name: '应用决策者' }
]
export default {
  name: 'Decision',
  components: {
    DatasetHuFea,
    QueryLearner
  },
  data () {
    return {
      // 选择数据集form
      chooseDatasetForm: {
        dataset_name: '',
        dataset_id: ''
      },
      datasetDialogVisible: false,
      // 决策类型
      decisionTypeOptions,
      // 选择学习器的
      chooseLearnerForm: {
        learner_id: '',
        learner_name: '',
        dataset_id: ''
      },
      datasetId: '',
      // 决策于学习器的表单
      decideLearnerForm: {
        decision_name: '',
        decision_type: 'Manual_L',
        decision_parameters: {},
        learner_id: '',
        dataset_id: ''
      },
      decideLearnerParamForm: {
        label: []
      },
      learnerDialogVisible: false,
      columnsList: []
    }
  },
  methods: {
    // 接受数据集组件传来的数据（原始的测试集，因为会自动去特征工程）
    chooseDataset (currentRow) {
      this.chooseDatasetForm.dataset_name = currentRow.dataset_name
      this.chooseDatasetForm.dataset_id = currentRow.dataset_id
      this.datasetId = currentRow.dataset_id
      this.datasetDialogVisible = false
    },
    // 从学习器传来的选中的学习器
    chooseLearner (currentRow) {
      console.log(currentRow)
      this.chooseLearnerForm.learner_id = currentRow.learner_id
      this.chooseLearnerForm.learner_name = currentRow.learner_name
      // this.chooseLearnerForm.dataset_id = currentRow.dataset_id
      // this.datasetId = this.chooseLearnerForm.dataset_id
      this.learnerDialogVisible = false
    },
    // 获取数据集列名
    getColumns () {
      if (this.datasetId !== '') {
        featureApi.getDatasetColumns(this.datasetId).then(response => {
          const resp = response.data
          this.columnsList = resp.data
        // console.log(this.columnsList)
        })
      }
    },
    // 提交应用于学习器的决策
    submitAllLearnerForm () {
      this.decideLearnerForm.dataset_id = this.datasetId
      this.decideLearnerForm.decision_parameters = this.decideLearnerParamForm
      this.decideLearnerForm.learner_id = this.chooseLearnerForm.learner_id
      decisionLearnerApi.addLearner(this.decideLearnerForm).then(response => {
        // console.log(response)
        const resp = response.data
        if (resp.meta.code === 204) {
          this.$message.success('添加决策成功')
        } else {
          this.$message.error('添加决策失败')
        }
      })
    },
    // 点击按钮，跳转到决策特征工程页面
    gotoDecHumanFea () {
      this.$router.push('/decision/decHumanFea')
    },
    gotoQueryDec () {
      this.$router.push('/decision/queryDecision')
    },
    gotoDecision () {
      this.$router.push('/decision')
    }
  }
}
</script>

<style scoped>
.queryBtn {
  margin-bottom: 20px;
}
.choosedataset {
  margin-top: 20px;
}
  .el-form-item{
    margin-bottom: 30px;
  }
</style>
